(function () {
  let arr = [
    {
      title: '故障设备监控',
      subTitle: ['故障时间', '设备地址', '异常代码'],
      contentArr: [
        {
          time: '20150102',
          address: '北京市昌平西路金燕龙写字楼',
          code: 100001,
        },
        {
          time: '20151215',
          address: '北京市海淀区上地大厦',
          code: 100022,
        },
        {
          time: '20160322',
          address: '天津市滨海新区互联网大厦',
          code: 100103,
        },
        {
          time: '20161012',
          address: '广州市南沙区可爱路',
          code: 100704,
        },
        {
          time: '20170611',
          address: '深圳市盐田区五道口大街',
          code: 103205,
        },
        {
          time: '20181112',
          address: '上海市宝山区南大街22号',
          code: 100008,
        },
        {
          time: '20180520',
          address: '天津市市区梅花大厦',
          code: 100011,
        },
        {
          time: '20190914',
          address: '北京市朝阳区人民写字楼',
          code: 100025,
        },
        {
          time: '20201102',
          address: '北京市东城区公园',
          code: 100301,
        },
        {
          time: '20201103',
          address: '石家庄市桥西区大龙写字楼',
          code: 105001,
        },
      ],
    },
    {
      title: '异常设备监控',
      subTitle: ['异常时间', '地址', '代码'],
      contentArr: [
        {
          time: '20201103',
          address: '石家庄市桥西区大龙写字楼',
          code: 105001,
        },
        {
          time: '20160322',
          address: '天津市滨海新区互联网大厦',
          code: 100103,
        },
        {
          time: '20170611',
          address: '深圳市盐田区五道口大街',
          code: 103205,
        },
        {
          time: '20151215',
          address: '北京市海淀区上地大厦',
          code: 100022,
        },
        {
          time: '20181112',
          address: '上海市宝山区南大街22号',
          code: 100008,
        },
        {
          time: '20180520',
          address: '天津市市区梅花大厦',
          code: 100011,
        },
        {
          time: '20190914',
          address: '北京市朝阳区人民写字楼',
          code: 100025,
        },
        {
          time: '20150102',
          address: '北京市昌平西路金燕龙写字楼',
          code: 100001,
        },
        {
          time: '20201102',
          address: '北京市东城区公园',
          code: 100301,
        },
        {
          time: '20161012',
          address: '广州市南沙区可爱路',
          code: 100704,
        },
      ],
    },
  ];
  //遍历arr，添加静态加载时数据
  arr.forEach(function (value, index) {
    $('.monitor .tabs').append(
      $(
        `<a href="javascript:;" data-index="${index}" class="${
          index === 0 ? 'active' : ''
        }">${value.title}</a>`
      )
    );
    if (index == 0) {
      load(value);
      //   value.subTitle.forEach(function (str) {
      //     $('.monitor .head').append(`<span class="col">${str}</span`);
      //   });
      //   value.contentArr.forEach(function (contentObj) {
      //     $('.monitor .marquee').append(`<div class="row">
      //     <span class="col">${contentObj.time}</span>
      //     <span class="col">${contentObj.address}</span>
      //     <span class="col">${contentObj.code}</span>
      //     <span class="icon-dot"></span>
      // </div>`);
      //   });
      //   $('.monitor .marquee').append($('.monitor .marquee div').clone());
    }
  });
  // 点击事件，获取改变下标，重新加载数据
  $('.monitor .tabs a').on('click', function () {
    $(this).addClass('active').siblings().removeClass('active');
    let index = $(this).index();
    let value = arr[index];
    $('.monitor .head').empty();
    $('.monitor .marquee').empty();

    load(value);
  });
  // 加载数据的封装
  function load(value) {
    value.subTitle.forEach(function (str) {
      //   $('.monitor .head').empty();
      $('.monitor .head').append(`<span class="col">${str}</span`);
    });
    // $('.monitor .marquee').empty();
    value.contentArr.forEach(function (contentObj) {
      $('.monitor .marquee').append(`<div class="row">
            <span class="col">${contentObj.time}</span>
            <span class="col">${contentObj.address}</span>
            <span class="col">${contentObj.code}</span>
            <span class="icon-dot"></span>
        </div>`);
    });
    // $('.monitor .marquee').empty(); //不对
    $('.monitor .marquee').append($('.monitor .marquee div').clone());
  }
})();
